<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<!-- 设置IE渲染方式默认为最高 除IE6： -->
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<!-- 兼容移动设备的展示效果： -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	
	<!-- 若页面需默认用极速核，增加标签： -->
	<meta name="renderer" content="webkit">

	<title>My UI plug-in</title>

	<!-- 引入CSS -->
    <link href="css/mui.css" rel="stylesheet">
    <link href="css/demo.css" rel="stylesheet">

    <!-- 引入字体图标文件 -->
    <link href="css/micon.css" rel="stylesheet"> 
    <style>

		@font-face {
		  font-family: 'iconfont';
		  src: url('font/iconfont.eot');
		  src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
		  url('font/iconfont.woff') format('woff'),
		  url('font/iconfont.ttf') format('truetype'),
		  url('font/iconfont.svg#iconfont') format('svg');
		}

    </style>

    <!-- 加载兼容文件：因为IE8既不支持HTML5 也不支持CSS3 Media，所以需要加载两个JS文件，来保证代码实现兼容效果：2017-06-30更新 -->
    <!-- WARNING: Respond.js 不能通过 file:// 协议访问 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
	
	<div class="container-fluid">
		<!-- 栅格 -->
		<!-- col -->
		<h1 id="col">栅格 <small>col-</small> </h1>
		<p>随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多24列。所有“列（column）必须放在 <code>.row</code> 内。</p>
		<div class="sample">
			<div class="row">
				<div class="col-s-2">.col-s-2</div>
				<div class="col-s-2">.col-s-2</div>
				<div class="col-s-2">.col-s-2</div>
				<div class="col-s-2">.col-s-2</div>
				<div class="col-s-2">.col-s-2</div>
				<div class="col-s-2">.col-s-2</div>
				<div class="col-s-2">.col-s-2</div>
				<div class="col-s-2">.col-s-2</div>
				<div class="col-s-2">.col-s-2</div>
				<div class="col-s-2">.col-s-2</div>
				<div class="col-s-2">.col-s-2</div>
				<div class="col-s-2">.col-s-2</div>
				<div class="col-m-16">.col-m-16</div>
				<div class="col-x-12 col-m-8">.col-x-12 .col-m-8</div>
				<div class="col-x-12 col-m-8">.col-x-12 .col-m-8</div>
				<div class="col-x-12 col-m-8">.col-x-12 .col-m-8</div>
				<div class="col-x-12 col-m-8">.col-x-12 .col-m-8</div>
				<div class="col-x-12">.col-x-12</div>
				<div class="col-x-12">.col-x-12</div>
			</div>
		</div>

	</div>



	<!-- jQuery (necessary for JavaScript plugins) -->
    <script src="js/jquery-3.1.1.min.js"></script>
    <!-- mui js -->
    <script src="js/mui.js"></script>
    <!-- 表单验证 -->
    
    
</body>
</html>